<template>
  <div class="register-container">
    <div class="register-box">
      <!-- 顶部图标 -->
      <div class="icon-wrapper">
        <div class="icon">
          <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
            <!-- 笔记本电脑 -->
            <rect x="20" y="35" width="60" height="40" rx="2" fill="#4a5568" />
            <rect x="23" y="38" width="54" height="30" fill="#a0aec0" />
            <path d="M 15 75 L 85 75 L 80 80 L 20 80 Z" fill="#4a5568" />
            <!-- 熊猫 -->
            <circle cx="75" cy="25" r="12" fill="#fff" />
            <circle cx="72" cy="23" r="3" fill="#000" />
            <circle cx="78" cy="23" r="3" fill="#000" />
            <circle cx="70" cy="20" r="4" fill="#000" />
            <circle cx="80" cy="20" r="4" fill="#000" />
            <ellipse cx="75" cy="27" rx="2" ry="3" fill="#000" />
            <path d="M 73 29 Q 75 30 77 29" stroke="#000" fill="none" stroke-width="1" />
          </svg>
        </div>
      </div>

      <!-- 标题 -->
      <h1 class="register-title">创建账号</h1>
      <p class="register-subtitle">加入我们的社区</p>

      <!-- 注册表单 -->
      <form @submit.prevent="handleRegister" class="register-form">
        <div class="form-item">
          <div class="input-wrapper">
            <svg class="input-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              <circle cx="12" cy="7" r="4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            <input
              v-model="registerForm.username"
              type="text"
              placeholder="请输入用户名"
              autocomplete="off"
              required
            />
            <span class="required">*</span>
          </div>
        </div>

        <div class="form-item">
          <div class="input-wrapper">
            <svg class="input-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <rect x="3" y="11" width="18" height="11" rx="2" ry="2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M7 11V7a5 5 0 0 1 10 0v4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            <input
              v-model="registerForm.password"
              type="password"
              placeholder="请输入密码"
              autocomplete="new-password"
              required
            />
            <span class="required">*</span>
          </div>
        </div>

        <div class="form-item">
          <div class="input-wrapper">
            <svg class="input-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <rect x="3" y="11" width="18" height="11" rx="2" ry="2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M7 11V7a5 5 0 0 1 10 0v4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            <input
              v-model="registerForm.confirmPassword"
              type="password"
              placeholder="请确认密码"
              autocomplete="new-password"
              required
            />
            <span class="required">*</span>
          </div>
        </div>

        <div class="form-item">
          <div class="input-wrapper">
            <svg class="input-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <rect x="4" y="4" width="16" height="16" rx="2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M22 6l-10 7L2 6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            <input
              v-model="registerForm.email"
              type="email"
              placeholder="请输入邮箱"
              autocomplete="off"
              required
            />
            <span class="required">*</span>
          </div>
        </div>

        <button type="submit" class="register-btn" :disabled="loading">
          {{ loading ? '注册中...' : '注 册' }}
        </button>
      </form>

      <!-- 底部链接 -->
      <div class="footer-links">
        <span class="footer-text">已有账号？</span>
        <router-link to="/login" class="login-link">返回登录</router-link>
      </div>
    </div>

    <!-- 底部版权 -->
    <div class="copyright">
      Copyright © 2025 py_Steven<br>
      粤ICP备2024039848号-1
    </div>

    <Loading :show="loading" text="注册中..." />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import message from '@/utils/message'
import Loading from '@/components/Loading.vue'

const router = useRouter()

const registerForm = ref({
  username: '',
  password: '',
  confirmPassword: '',
  email: ''
})

const loading = ref(false)

const handleRegister = async () => {
  if (loading.value) return

  // 验证密码是否一致
  if (registerForm.value.password !== registerForm.value.confirmPassword) {
    message.error('两次输入的密码不一致')
    return
  }

  // 验证邮箱格式
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
  if (!emailRegex.test(registerForm.value.email)) {
    message.error('请输入正确的邮箱地址')
    return
  }

  try {
    loading.value = true

    // TODO: 调用注册 API
    // const response = await register({
    //   username: registerForm.value.username,
    //   password: registerForm.value.password,
    //   email: registerForm.value.email
    // })

    // 模拟注册成功
    await new Promise(resolve => setTimeout(resolve, 1000))

    message.success('注册成功，请登录')
    router.push('/login')
  } catch (error) {
    message.error(error.message || '注册失败')
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.register-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #c3e6e6 0%, #a8d5d5 100%);
  padding: 20px;
}

.register-box {
  background: white;
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  width: 420px;
  max-width: 100%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.register-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
}

/* 图标样式 */
.icon-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.icon {
  width: 80px;
  height: 80px;
  transition: transform 0.3s ease;
}

.icon:hover {
  transform: scale(1.1) rotate(5deg);
}

.icon svg {
  width: 100%;
  height: 100%;
}

/* 标题样式 */
.register-title {
  text-align: center;
  margin-bottom: 8px;
  color: #2d3748;
  font-size: 32px;
  font-weight: 600;
}

.register-subtitle {
  text-align: center;
  margin-bottom: 30px;
  color: #718096;
  font-size: 14px;
}

/* 表单样式 */
.register-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-item {
  position: relative;
}

.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  transition: transform 0.2s ease;
}

.input-wrapper:hover {
  transform: translateX(3px);
}

.input-icon {
  position: absolute;
  left: 14px;
  width: 20px;
  height: 20px;
  color: #a0aec0;
  pointer-events: none;
  transition: color 0.3s ease;
}

.input-wrapper:focus-within .input-icon {
  color: #38b2ac;
}

.required {
  position: absolute;
  right: 14px;
  color: #e53e3e;
  font-size: 16px;
  font-weight: bold;
  pointer-events: none;
}

.form-item input {
  width: 100%;
  padding: 14px 14px 14px 45px;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  font-size: 14px;
  color: #2d3748;
  transition: all 0.3s ease;
  background: #f7fafc;
}

.form-item input::placeholder {
  color: #cbd5e0;
}

.form-item input:focus {
  outline: none;
  border-color: #38b2ac;
  background: white;
  box-shadow: 0 0 0 3px rgba(56, 178, 172, 0.1);
}

.form-item input:hover:not(:focus) {
  border-color: #cbd5e0;
}

/* 注册按钮 */
.register-btn {
  margin-top: 10px;
  padding: 14px;
  background: linear-gradient(135deg, #38b2ac 0%, #319795 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(56, 178, 172, 0.3);
}

.register-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #319795 0%, #2c7a7b 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(56, 178, 172, 0.4);
}

.register-btn:active:not(:disabled) {
  transform: translateY(0);
}

.register-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* 底部链接 */
.footer-links {
  margin-top: 24px;
  text-align: center;
  font-size: 14px;
}

.footer-text {
  color: #718096;
}

.login-link {
  color: #38b2ac;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.login-link:hover {
  color: #319795;
  text-decoration: underline;
}

/* 版权信息 */
.copyright {
  margin-top: 30px;
  text-align: center;
  color: #718096;
  font-size: 12px;
  line-height: 1.6;
}

/* 响应式设计 */
@media (max-width: 480px) {
  .register-box {
    padding: 30px 20px;
  }

  .register-title {
    font-size: 26px;
  }
}
</style>
